<script setup lang="ts">

import ComfyModelSelect from "~/components/common/DropSelect.vue";
import DropSelect from "~/components/common/DropSelect.vue";
import {ComfyUI, type OutPut, type SD3AspectRatio} from "~/utils/comfyuiApi";
import Prompt from "~/components/ai/PromptBase.vue";
import SliderBase from "~/components/ai/SliderBase.vue";
import ModelSelect from "~/components/ai/ModelSelect.vue";
import LabelBase from "~/components/ai/LabelBase.vue";
import Positive from "~/components/ai/Positive.vue";
import Negative from "~/components/ai/Negative.vue";
import Width from "~/components/ai/Width.vue";
import Height from "~/components/ai/Height.vue";

const sdStore = useStableDiffusionStore()
const {ouputimgList, txt2imgParams, isGernateDisable, ckpt_id} = storeToRefs(sdStore)
const {operationConfig:{enableMultiTask}}=useAppStore()
// SD3 图像比例
const aspect_ratio = ref<SD3AspectRatio>('1:1')
const style_preset = ref('')

// console.log(txt2img)
//生成图片
const imageGenerate = async () => {
  isGernateDisable.value = true
  // txt2imgParams.value.seed = useTokenUtilgenerateRandomNumber(15)
  // txt2imgParams.value.ckpt_name = ComfyUI.ckpt_names[ckpt_id.value]
  const output = await ComfyUI.text2img({
    ...txt2imgParams.value,
    sd3_aspect_ratio: aspect_ratio.value,
  }, {
    apisource: apisource.value
  })
  if (output && output.output?.length > 0) {
    const image = {
      url: output.output[0],
      api: 'text2img',
    } as Image
    ouputimgList.value.unshift(image)
    //保存历史记录
    await ComfyUI.saveDrawHistory({
      output: output.output,
      params: txt2imgParams.value,
      type: 'image'
    })
    // }
    isGernateDisable.value = false
  }
}
const ckpt_nameList = ref<any>([])
onMounted(async () => {
  //获取本地支持的大模型
  await ComfyUI.Initalize()
  console.log(ComfyUI.ckpt_names)
  ComfyUI.ckpt_names.forEach((item, index) => {
    const ckpt = {
      value: index,
      name: item
    }
    ckpt_nameList.value.push(ckpt)
  })
  //如果当前store中存储的大模型名称不存在则重置为第一个
  if (txt2imgParams.value.ckpt_name && !ComfyUI.ckpt_names.includes(txt2imgParams.value.ckpt_name)) {
    txt2imgParams.value.ckpt_name = ComfyUI.ckpt_names[0]
  }
})


// 绘图渠道
const apisources = useGlobalConfig.Draw.apisources
const apisource = ref(apisources[1].value)
watch(apisource, (newValue) => {
  console.log(newValue)
})


</script>

<template>
  <v-card height="auto">
    <v-card-text>
      <!-- Prompt  -->
      <positive v-model="txt2imgParams.positive"/>
      <!-- Negative Prompt  -->
      <negative v-model="txt2imgParams.negative"/>
      <!--      绘画渠道选择-->
      <v-sheet class="d-flex justify-space-between align-center">
        <v-label class="text-capitalize font-weight-bold">绘画渠道选择</v-label>
        <v-spacer></v-spacer>
        <v-chip-group v-model="apisource" filter>
          <v-chip size="small" v-for="(item,index) in apisources" :key="index" :value="item.value">{{
              item.text
            }}
          </v-chip>
        </v-chip-group>
      </v-sheet>
      <!--      选择大模型-->
      <v-sheet v-show="apisource==='default'">
        <model-select v-model="txt2imgParams.ckpt_name"/>
      </v-sheet>
      <!--      SD3参数比率选择-->
      <v-sheet v-show="apisource==='sd3'">
        <drop-select label="画面比例" v-model="aspect_ratio" :items="useGlobalConfig.Draw.SD3_aspect_ratios"/>
      </v-sheet>
      <!--      风格-->
      <v-sheet v-show="apisource==='sd3'">
        <drop-select v-model="style_preset" :items="useGlobalConfig.Draw.SD3_style_presets" label="风格"/>
      </v-sheet>
      <!--图片尺寸-->
      <v-row v-show="apisource==='default'" justify="space-around">
        <v-col cols="6">
          <!-- ---------------------------------------------- -->
          <!-- Width   -->
          <!-- ---------------------------------------------- -->
          <width v-model="txt2imgParams.width"/>
        </v-col>
        <v-col cols="6">
          <!-- Height   -->
          <height v-model="txt2imgParams.height"/>
        </v-col>
      </v-row>

      <!--       生成按钮-->
      <v-btn class="mt-2" size="x-large" color="primary"
             :loading="enableMultiTask?false:isGernateDisable"
             block @click="imageGenerate">开始生成
        <template v-slot:loader>
          {{ sdStore.btnStatus }}
          <v-progress-circular
              indeterminate
              color="primary"
              :model-value="sdStore.getProcess"></v-progress-circular>
        </template>
      </v-btn>
    </v-card-text>
  </v-card>
</template>

<style scoped lang="scss"></style>
